<template>
	<view class="flex-col page">

		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group">
				<view class="flex-col group_1">
					<image :src="imgUrl+'16557867932532079355.png'" class="image_1" />
					<view class="flex-col section_1">
						<view class="flex-row group_2">
							<image :src="imgUrl+'16557867940327051981.png'" class="image_2" />
							<text class="text_1">装修估价介绍</text>
						</view>
						<text class="text_2">
							根据相关信息估算出你家从设计、施工、主材到设备、定制柜、家具及软装等所有类目的全费用并给出各类目配置标准、费用比例及参考效果图供业主参考
						</text>
					</view>
					<view class="flex-col section_2">
						<view class="justify-between section_3"
							@click="go('/pages/index/editHourse?id='+family.projectId)">
							<text class="text_3">我的房屋信息</text>
							<image :src="imgUrl+'16557867932504125179.png'" class="image_4" />
						</view>
						<view class="flex-col group_3">
							<view class="justify-between">
								<text class="text_4">房屋位置</text>
								<text
									class="text_5">{{family.provinceName}}{{family.cityName}}{{family.districtName}}</text>
							</view>
							<view class="flex-col group_5">
								<view class="justify-between">
									<text class="text_6">房屋面积</text>
									<text class="text_7">{{family.roomArea}}m²</text>
								</view>
								<view class="justify-between group_7">
									<text class="text_8">房屋类型</text>
									<text class="text_9">{{family.roomTypeName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col section_4">
						<view class="flex-row">
							<image :src="imgUrl+'16557867940327051981.png'" class="image_2" />
							<text class="text_10">装修档次</text>
						</view>
						<view class="flex-col group_9">
							<view class="flex-row u-flex-wrap">
								<view class="flex-row items-center justify-center u-m-t-30  "
									v-for="(item,i) in roomType" :key="i"
									:class="[index==i?'text-wrapper':'text-wrapper_1',(i+1)%4==0?'':'u-m-r-15']"
									@click="clickItem(i,item.dispositionTypeId)"><text
										class="text_11">{{item.dispositionTypeName}}</text></view>

							</view>
						</view>
					</view>
					<view class="justify-between section_5" @click="show=true">
						<text class="text_19">根据装修预算查询</text>
						<view class="flex-row group_12">
							<text class="text_20">查询</text>
							<view class="img-cent">
								<!-- <image :src="imgUrl+'16557868075783727961.png'" class="image_6" /> -->
								<u-icon name="arrow-right" size="28" color="#1d6aff"></u-icon>
							</view>

						</view>
					</view>
				</view>
			</view>
			<u-modal :show="show" :showConfirmButton="false" :show-title="false" title="">
				<view class="u-flex u-flex-col">
					<view class="u-flex u-p-t-10 w-full">
						<text class="u-flex-1 u-flex u-row-center u-col-center font-700">根据装修预算查询</text>
						<u-icon name="close" @click="shows()"></u-icon>
					</view>
					<view class="u-flex u-flex-col u-col-top u-m-t-50 u-font-30 font-700">
						<text class="title">装修预算</text>
						<view>

							<u--input style="width:500rpx" type="number" prefixIcon="rmb" v-model="prices"
								label-width="50"
								prefixIconStyle="width: 30px;height: 60rpx;font-size:38rpx;font-weight:bold;color: #000000;"
								border="bottom" placeholder="请输入装修预算金额"
								placeholderStyle="font-weight:lighter; width:360px; height:60rpx; font-size:32rpx; letter-spacing: 1rpx;">
							</u--input>
						</view>
						<view class="u-m-t-30" style="">
							<text class="notice ">*注：输入预算金额展示对应类别</text>
						</view>
						<view class="buttons">
							<view class="btn" @click="cancel"><text>取消</text></view>
							<!-- <navigator url="/pages/index/estimatelist/estimatelist">
								<view class="btn confirm"><text>确认</text></view>
							</navigator> -->
							<view class="btn confirm" @click="gos()"><text>确认</text></view>
						</view>
					</view>
				</view>

			</u-modal>
		</scroll-view>
		<view class="u-p-l-20 u-p-r-20 fixed">
			<view class="flex-col items-center button" @click="submits()"><text class="text_21">查看估算清单</text></view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		created() {
			this.getFamily();
			this.queryDecorationTypeList();
		},
		data() {
			return {
				imgUrl: this.$IMG_URL,
				show: false,
				family: {},
				index: 0,
				roomType: [],
				dispositionType_id: '',
				prices: ''
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');
		},
		methods: {
			shows() {
				this.prices = '';
				this.show = false;
			},
			clickItem(i, id) {
				this.index = i;
				this.dispositionType_id = id;
			},
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
						console.log(this.family);
						// if(JSON.stringify(this.family)==="{}")
					}
				});
			},
			queryDecorationTypeList() {
				this.$http('harryroom.queryDecorationTypeList').then(r => {
					if (r.code == 200) {
						this.roomType = r.data

						this.dispositionType_id = r.data[0].dispositionTypeId //初始默认值
						console.log(r.data[0].dispositionTypeId, '111')
					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			gos() {
				if (this.prices == '') {
					this.$u.toast('请填写估算金额');
					return
				}
				this.go('/pages/index/estimatelist/estimatelist?budget=' + this.prices + '&decorationLevelId=' + this
					.dispositionType_id);
				this.show = false
				this.prices = ''
			},
			submits() {

				this.go('/pages/index/estimatelist/estimatelist?decorationLevelId=' + this.dispositionType_id);
				// this.queryEst()
			},
			queryEst(budget = null) {
				var infos = {
					budget: budget,
					decorationLevelId: this.dispositionType_id,
				}
				this.$http('harryroom.queryEst', infos).then(r => {
					console.log(r)
					if (r.code == 200) {

					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			// 弹窗取消按钮
			cancel() {
				this.show = false
				this.prices = ''
			}
		},
	};
</script>

<style scoped lang="scss">
	.scroll {
		height: calc(100vh - 200rpx);
	}

	.fixed {
		position: fixed;
		bottom: 40rpx;
		right: 0;
		left: 0;
	}

	.buttons {
		margin-top: 64rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 212rpx;
			height: 72rpx;
			background: #F6F7F9;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			opacity: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333333;
			font-weight: lighter;
		}

		.btn.confirm {
			background-color: #1D6AFF;
			color: #ffffff;
			margin-left: 40px;
		}
	}

	.notice {

		width: 319rpx;
		height: 30rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF371D;
		line-height: 0px;
		-webkit-background-clip: text;

	}

	.title {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 0px;


	}

	.image_2 {
		margin-top: 15rpx;
		width: 26rpx;
		height: 16rpx;

	}

	.text-wrapper_1 {
		width: 152rpx;
		height: 64rpx;
		background: #F6F7F9;
		border-radius: 32rpx;
		opacity: 1;
	}

	.text_12 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding: 0 24rpx 48rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 20rpx 0 48rpx;
	}

	.button {
		margin: 0 8rpx;
		padding: 22rpx 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.image_1 {
		border-radius: 16rpx;
		width: 93.6vw;
		height: 43.7333vw;
	}

	.section_1 {
		margin-top: 20rpx;
		padding: 0 24rpx 68rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_4 {
		margin-top: 20rpx;
		padding: 29rpx 22rpx 23rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin-top: 20rpx;
		height: 104rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_21 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 40rpx;
		height: 40rpx;
	}

	.group_2 {
		padding: 29rpx 0 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_2 {
		margin-top: 32rpx;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 42rpx;
		text-align: left;
	}

	.section_3 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_3 {
		padding: 30rpx 22rpx 41rpx 24rpx;
	}

	.group_9 {
		margin-top: 12rpx;
	}

	.text_19 {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_12 {
		margin-right: 16rpx;
	}

	.text_1 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.text_3 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_4 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.group_5 {
		margin-top: 39rpx;
	}

	.text_10 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: bold;
	}

	.group_11 {
		margin-top: 32rpx;
	}

	.text_20 {
		display: flex;
		align-items: center;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_6 {
		margin-left: 14rpx;
		// margin-top: 6rpx;
		flex-shrink: 0;
		width: 15rpx;
		height: 24rpx;
	}

	.img-cent {
		margin-top: 5rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_5 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_7 {
		margin-top: 33rpx;
	}

	.text-wrapper {
		width: 152rpx;
		height: 64rpx;
		background: rgba(29, 106, 255, 0.1);
		border-radius: 32rpx;
		opacity: 1;
		border: 1px solid #1C62F9;
		color: #1C62F9;
	}

	.text_6 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		margin-top: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_11 {

		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 40rpx;
		height: 40rpx;
	}

	.active {}
</style>
